<template>
  <body>
  <div class="register">
  <h1>注册页面</h1>
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()" >提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
</template>

<script>
 import axios from 'axios';
  export default {
    data() {
      var checkUser = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        
      };
      var checkEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        
      };
      var validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('密码不能为空'));
    } else {
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
        if (!passwordRegex.test(value)) {
            callback(new Error('必须8-20位，包含大小写字母特殊字符'));
        } 
    }
      };
      var validatePass2 = (rule, value, callback) => {
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if(!passwordRegex.test(value)){
          callback(new Error('必须8-20位，包含大小写字母特殊字符'));
        }else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
          alert("两次输入密码不一致")
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          password: '',
          checkPass: '',
          name: '',
          email: ''
        },
        rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          name: [
            { validator: checkUser, trigger: 'blur' }
          ],
          email: [
            { validator: checkEmail, trigger: 'blur' }
          ]
        }
      };
      
    
    },
    methods: {
      submitForm() {
    const { ruleForm } = this;
    axios.post('http://localhost/user/register', ruleForm)
        .then((response) => {
            console.log(response.data);
            if (response.data.code === 20000) {
                alert("注册成功");
                this.$router.push('/login');
            } else {
                alert(`注册失败: ${response.data.message || '未知错误'}`);
            }
        })
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style scoped>
body {
  background-image: url('../assets/login-bg.jpg');
  background-size: auto;
  /* 保持图片原始尺寸 */
  background-repeat: repeat;
  /* 背景图片重复 */
  background-position: center center;
  /* 背景图片在元素中居中显示 */

  display: flex;
  /* 启用Flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  /* 容器的高度 */
}

.register {
  /* background-image: url('../assets/login-header.png'); */
  background-size: 40em;
  background-repeat: no-repeat;
  width: 40em;
  height: 50em;
  background-color: #f5f5f5;
  display: flex;
  /* 启用Flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  flex-direction: column;
}

.avatar {
  width: 10em;
  border-radius: 50%;
  position: relative;
  top: -5em;
  border: 0.5em solid #FFF;
  /* 添加边框 */
}
</style>